---
import type { CollectionEntry } from 'astro:content'

import BaseHead from '@/components/BaseHead.astro'
import FormattedDate from '@/components/FormattedDate.astro'

type Props = CollectionEntry<'blog'>['data']

const { title, description, pubDate, updatedDate, heroImage } = Astro.props
---

<!doctype html>
<html lang='en'>
  <head>
    <BaseHead title={title} description={description} />
  </head>

  <body>
    <main>
      <article>
        <div class='hero-image'>
          {
            heroImage && (
              <img width={1020} height={510} src={heroImage} alt='' />
            )
          }
        </div>
        <div class='prose'>
          <div class='title'>
            <div class='date'>
              <FormattedDate date={pubDate} />
              {
                updatedDate && (
                  <div class='last-updated-on'>
                    Last updated on <FormattedDate date={updatedDate} />
                  </div>
                )
              }
            </div>
            <h1>{title}</h1>
            <hr />
          </div>
          <slot />
        </div>
      </article>
    </main>
  </body>
</html>
